<template>
	<view class="page-content flex-col">
		<view class="header">
			<view class="flex-col group_4">
				<view class="flex-col" style="margin-bottom: 16rpx">
					<view class="flex-row items-center">
						<view class="group_5"></view>
						<text class="font_2 text_2 ml-9">{{
              formdata.deliveryAddress
            }}</text>
					</view>
					<view class="flex-row items-center mt-17">
						<view class="section_2"></view>
						<text class="font_2 ml-9">{{ formdata.receivingAddress }}</text>
					</view>
				</view>
				<view class="price">
					<text class="text_3">￥</text>
					<text class="text_2">{{ formdata.price }}</text>
				</view>
				<view class="mt-12 flex-row justify-between items-center">
					<view class="flex-row items-center">
						<view class="flex-row items-center">
							<image class="shrink-0 image_5" src="/static/index/location2.png" />
							<text class="ml-4 font_3 text_3">{{ formdata.distance?formdata.distance.substr(0,4):'--' }}km</text>
						</view>
						<view class="ml-16 flex-row items-center">
							<image class="shrink-0 image_4" src="/static/index/animal.png" />
							<text class="ml-4 font_3 text_4">{{ formdata.petPlanPetInfos.length }}只</text>
						</view>
					</view>
					<view class="flex-row">
						<view class="flex-row items-center">
							<image class="shrink-0 image_6" src="/static/index/date.png" />
							<text class="font_4 ml-7">{{
                formdata.deliveryTime.split(" ")[0]
              }}</text>
						</view>
						<view class="ml-22 flex-row items-center">
							<image class="shrink-0 image_7" src="/static/index/time-light.png" />
							<text class="font_4 ml-7">{{
                formdata.deliveryTime.split(" ")[1]
              }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="common-box" v-for="(item, index) in formdata.petPlanPetInfos" :key="index">
			<form-item-title :text="`宠物${index + 1}`"></form-item-title>
			<u-grid :col="3" :border="false">
				<u-grid-item v-for="(img, i) in item.photo.split(',')" :key="i">
					<view class="grid-image">
						<image :src="img"></image>
					</view>
				</u-grid-item>
			</u-grid>
			<view class="grid">
				<view class="flex-col items-start grid-item">
					<text class="font_3">宠物名</text>
					<text class="font_5 mt-11">{{ item.name }}</text>
				</view>
				<view class="flex-col items-start grid-item">
					<text class="font_3">品种</text>
					<text class="font_5 mt-11">{{ item.breed }}</text>
				</view>
				<view class="flex-col items-start grid-item">
					<text class="font_3">疫苗接种信息</text>
					<text class="mt-10 font_5">{{
            item.ifVaccination ? "已接种" : "未接种"
          }}</text>
				</view>
				<view class="flex-col items-start grid-item">
					<text class="font_3">宠物年龄</text>
					<text class="mt-10 font_5">{{ item.age }}</text>
				</view>
			</view>
		</view>
		<view class="common-box">
			<form-item-title text="行程预览"></form-item-title>
			<view class="map-box">
				<map style="width: 100%; height: 100%" :latitude="formdata.lng" :longitude="formdata.lat" />
			</view>
		</view>
		<view class="bottom-box flex-row items-center">
			<view class="left" @click="handleToChat(formdata.publisherId)"> 聊一聊 </view>
			<view class="right" @click="handleYuyue"> 申请运宠 </view>
		</view>
	</view>
</template>

<script>
	import formItemTitle from "components/index/form-item-title.vue";
	import customTag from "components/common/custom-tag.vue";
	import petBasi from "../../../api/petBasi.js";
	import utils from "../../../utils/util.js";
	const app = getApp();
	export default {
		data() {
			return {
				formdata: {
					delivery: "",
					deliveryAddress: "",
					deliveryPhone: "",
					deliveryTime: "",
					lat: 0,
					lng: 0,
					petPlanPetInfos: [],
					price: "",
					publisherId: "",
					remark: "",
					receivingAddress: "",
					recipient: "",
					recipientPhone: "",
					distance: 0,
				},
				// convertedAges: [], // 用于存储转换后的年龄
			};
		},
		onLoad(option) {
			this.getDetail(option.id, option.distance);
			const userinfo = uni.getStorageSync("userinfo");
			if (userinfo) {
				this.userinfo = userinfo;
			}
		},
		methods: {
			// 转换宠物年龄
			// convertAges() {
			// 	this.convertedAges = this.formdata.petPlanPetInfos.map((pet) =>
			// 		utils.convertMonthsToYearsAndMonths(pet.age)
			// 	);
			// },
			getDetail(id, distance) {
				petBasi
					.getPetPlanById(id)
					.then((res) => {
						if (res.code === 200) {
							this.formdata = res.data;
							this.formdata.distance = distance;
						} else {
							uni.showToast({
								title: "请求失败",
								icon: "none",
							});
						}
					})
					.catch((err) => {
						uni.showToast({
							title: "请求失败",
							icon: "none",
						});
					});
			},
			handleToChat(id) {
				uni.navigateTo({
					url: '/pages/news/user-chat/user-chat?userId=' + id
				})
			},
			handleYuyue() {
				petBasi.addGoApplay({
					userId: this.userinfo.id,
					eventId: this.formdata.id,
					type: 1
				}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '申请成功',
							icon: 'none'
						})
					} else {
						throw Error(res.msg);
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
			}
		},
		components: {
			formItemTitle,
			customTag,
		},
	};
</script>

<style lang="scss" scoped>
	.page-content {
		background-color: #ffffff;
		height: 100%;
		overflow-y: auto;

		.header {
			.mt-17 {
				margin-top: 34rpx;
			}

			.ml-7 {
				margin-left: 14rpx;
			}

			.ml-9 {
				margin-left: 18rpx;
			}

			.group_4 {
				padding: 36rpx 32rpx 48rpx;
				border-bottom: solid 2rpx #f6f6f6;

				.price {
					.text_3 {
						color: #ff7676;
						font-size: 24rpx;
						font-family: D-DIN;
						line-height: 17.72rpx;
					}

					.text_2 {
						color: #ff7676;
						font-size: 48rpx;
						font-family: D-DIN;
						line-height: 34.18rpx;
					}
				}

				.group_5 {
					border-radius: 50%;
					width: 24rpx;
					height: 24rpx;
					border-left: solid 2rpx #999999;
					border-right: solid 2rpx #999999;
					border-top: solid 2rpx #999999;
					border-bottom: solid 2rpx #999999;
				}

				.font_2 {
					font-size: 40rpx;
					font-family: PingFang SC;
					line-height: 37.56rpx;
					font-weight: 700;
					color: #333333;
				}

				.text_2 {
					line-height: 37.52rpx;
				}

				.section_2 {
					background-color: #fcd610;
					border-radius: 50%;
					width: 24rpx;
					height: 24rpx;
				}

				.image_5 {
					width: 33.58rpx;
					height: 30.42rpx;
				}

				.font_3 {
					font-size: 24rpx;
					font-family: PingFang SC;
					line-height: 20.78rpx;
					color: #999999;
				}

				.text_3 {
					line-height: 17.8rpx;
				}

				.image_4 {
					width: 33.58rpx;
					height: 30.42rpx;
				}

				.text_4 {
					line-height: 20.76rpx;
				}

				.image_6 {
					width: 28rpx;
					height: 28rpx;
				}

				.font_4 {
					font-size: 28rpx;
					font-family: PingFang SC;
					line-height: 20.78rpx;
					font-weight: 700;
					color: #000000;
				}

				.image_7 {
					border-radius: 50%;
					width: 28rpx;
					height: 28rpx;
				}
			}
		}

		.common-box {
			padding: 32rpx 38rpx;
			border-bottom: solid 2rpx #f6f6f6;
			flex: 1;

			.mt-11 {
				margin-top: 22rpx;
			}

			.grid-image {
				width: 168rpx;
				height: 166rpx;
				border-radius: 16rpx;

				>image {
					width: 168rpx;
					height: 166rpx;
					border-radius: 16rpx;
				}
			}

			.grid {
				display: grid;
				grid-template-rows: repeat(2, minmax(0, 1fr));
				grid-template-columns: repeat(2, minmax(0, 1fr));
				row-gap: 0;
				column-gap: 99.96rpx;

				.grid-item {
					padding: 28rpx 0rpx;

					.font_3 {
						font-size: 24rpx;
						font-family: PingFang SC;
						line-height: 22rpx;
						color: #999999;
					}

					.font_5 {
						font-size: 28rpx;
						font-family: PingFang SC;
						line-height: 25.34rpx;
						font-weight: 700;
						color: #000000;
					}
				}
			}

			.map-box {
				height: 312rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				background-color: #fff;
				overflow: hidden;
			}
		}

		.bottom-box {
			.left {
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				padding: 42rpx 52rpx;
			}

			.right {
				width: 542rpx;
				height: 88rpx;
				background: #fcd610;
				border-radius: 68rpx 68rpx 68rpx 68rpx;
				text-align: center;
				line-height: 88rpx;
				font-weight: bold;
				font-size: 32rpx;
			}
		}
	}
</style>